<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客户信息列表</title>
    <!--引入element-ui-->
    <link rel="stylesheet" href="/resources/element-ui/lib/theme-chalk/index.css">
    <!--引入vue-->
    <script type="text/javascript" src="/resources/js/vue.js"></script>
    <script type="text/javascript" src="/resources/element-ui/lib/index.js"></script>
    <!--引入axios-->
    <script type="text/javascript" src="/resources/js/axios.min.js"></script>
</head>

<body>
<div id="app">
    <!--顶部菜单：添加、批量删除、搜索-->
    <el-row type="flex" justify="space-between">
        <el-col :span="4">
            <el-button type="success" icon="el-icon-plus" size="small"
                       @click="openAddWin">添加</el-button>
            <el-button type="danger" icon="el-icon-delete" size="small"
                       @click="delMany">批量删除</el-button>
        </el-col>
    </el-row>

    <!--在顶部工具栏和表格之间添加间隙-->
    <div style="margin: 5px"></div>
    <!--数据表格展示-->
    <!--userList包含了数据库user表里面的全部数据-->
    <el-table :data="userList" border @select-all="selectAll" @select="selectOne">
        <!--type属性表示该值不是来至于数据库表的字段-->
        <el-table-column label="复选款"  align="center" type="selection"></el-table-column>
        <el-table-column label="序号"  align="center" type="index"></el-table-column>
        <!--prop属性表示该值来至于数据库表里面的字段-->
        <el-table-column label="主键"  align="center" prop="id"></el-table-column>
        <el-table-column label="客户姓名"  align="center" prop="username"></el-table-column>
        <el-table-column label="生日"  align="center" prop="birthday"></el-table-column>
        <!--使用formatter来对表里面的数据进行格式化处理-->
        <el-table-column label="性别"  align="center" prop="sex" :formatter="sexFmt"></el-table-column>
        <el-table-column label="电话"  align="center" prop="tel"></el-table-column>
        <el-table-column label="薪资(元)"  align="center" prop="sal" :formatter="salFmt"></el-table-column>
        <el-table-column label="职业"  align="center" prop="profession" :formatter="professionFmt"></el-table-column>
        <el-table-column label="员工住址"  align="center" prop="address"></el-table-column>
        <!--是想要获取到全部数据里面的remark这个字段里面的数据-->
        <!--不能使用userList.xxx.xx的方式，原因是该写法是后端代码的写法-->
        <!--前端需要使用scope来表示全部数据，通过scope.row来获取到当前那一行的值  通过scope.row.remark获取到当前行里面remark属性的值-->
        <el-table-column label="备注"  align="center" prop="remark">
            <template slot-scope="scope">
                {{scope.row.remark==null || scope.row.remark==''?'暂无信息':scope.row.remark}}
            </template>
        </el-table-column>
        <el-table-column label="部门名称"  align="center" prop="name"></el-table-column>
        <el-table-column label="部门地址"  align="center" prop="loc"></el-table-column>
        <el-table-column label="操作" width="200"  align="center" >
            <template slot-scope="scope">
                <div>
                    <el-button type="success" icon="el-icon-edit" size="mini"
                               @click="openEditWin(scope.row)">编辑</el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini"
                               @click="delOne(scope.row)">删除</el-button>
                </div>
            </template>
        </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
            :total="total"
            :current-page="pageNum"
            :page-size="pageSize"
            :page-sizes="pageSizes"
            @current-change="currentChange"
            @size-change="sizeChange"
            background
            layout="total,sizes,prev,pager,next,jumper"
    >
    </el-pagination>

    <!--添加弹窗-->
    <el-dialog :visible.sync="addWinOpenStatus" title="添加客户信息" @close="addWinClose">
        <el-form :rules="formRules" :model="addUserFormData" ref="addWinRef">
            <el-form-item prop="username" label="姓名" label-width="60px">
                <el-input v-model="addUserFormData.username" prefix-icon="el-icon-user"
                          placeholder="长度为2-10位简体中文"></el-input>
            </el-form-item>
            <el-form-item prop="birthday" label="生日" label-width="60px">
                <el-date-picker v-model="addUserFormData.birthday" value-format="yyyy-MM-dd"
                                placeholder="请选择日期"></el-date-picker>
            </el-form-item>
            <el-form-item prop="sex" label="性别" label-width="60px">
                <el-radio-group v-model="addUserFormData.sex">
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="0">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item prop="tel" label="手机" label-width="60px">
                <el-input v-model="addUserFormData.tel" prefix-icon="el-icon-mobile-phone"
                          placeholder="请输入手机号"></el-input>
            </el-form-item>

            <el-form-item prop="sal" label="薪资" label-width="60px">
                <el-input v-model="addUserFormData.sal" prefix-icon="el-icon-money" placeholder="请输入薪资"></el-input>
            </el-form-item>
            <el-form-item prop="profession" label="职业" label-width="60px">
                <el-select v-model="addUserFormData.profession" placeholder="请选择职业">
                    <el-option label="程序猿" value="1"></el-option>
                    <el-option label="攻城狮" value="2"></el-option>
                    <el-option label="码龙" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="address" label="住址" label-width="60px">
                <el-input v-model="addUserFormData.address" prefix-icon="el-icon-location"
                          placeholder="地址长度为10-200"></el-input>
            </el-form-item>
            <el-form-item prop="remark" label="备注" label-width="60px">
                <el-input v-model="addUserFormData.remark" prefix-icon="el-icon-more" placeholder="请输入备注"></el-input>
            </el-form-item>
            <el-form-item prop="deptId" label="部门" label-width="60px">
                <el-select v-model="addUserFormData.deptId" placeholder="请选择部门">
                    <!--:label表示客户下拉之后能看到数据-->
                    <!--:value表示下拉之后客户选择了一个部门-->
                    <el-option v-for="(item) in deptList" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="" label-width="60px">
                <el-button type="primary" icon="el-icon-check" @click="addUserOk">确定</el-button>
                <el-button type="danger" icon="el-icon-close" @click="addUserCancel">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!--编辑弹窗-->
    <el-dialog :visible.sync="editWinOpenStatus" title="编辑客户信息" @close="editWinClose">
        <el-form :rules="formRules"
                 :model="editUserFormData"
                 ref="editWinRef">
            <el-form-item prop="username" label="姓名" label-width="60px">
                <el-input v-model="editUserFormData.username" prefix-icon="el-icon-user"
                          placeholder="长度为2-10位简体中文"></el-input>
            </el-form-item>
            <el-form-item prop="birthday" label="生日" label-width="60px">
                <el-date-picker v-model="editUserFormData.birthday" value-format="yyyy-MM-dd"
                                placeholder="请选择日期"></el-date-picker>
            </el-form-item>
            <el-form-item prop="sex" label="性别" label-width="60px">
                <el-radio-group v-model="editUserFormData.sex">
                    <el-radio label="1">男</el-radio>
                    <el-radio label="0">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item prop="tel" label="手机" label-width="60px">
                <el-input v-model="editUserFormData.tel" prefix-icon="el-icon-mobile-phone"
                          placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item prop="sal" label="薪资" label-width="60px">
                <el-input v-model="editUserFormData.sal" prefix-icon="el-icon-money"
                          placeholder="请输入薪资"></el-input>
            </el-form-item>

            <el-form-item prop="profession" label="职业" label-width="60px">
                <el-select v-model="editUserFormData.profession" placeholder="请选择职业">
                    <el-option label="程序猿" value="1"></el-option>
                    <el-option label="攻城狮" value="2"></el-option>
                    <el-option label="码龙" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="address" label="住址" label-width="60px">
                <el-input v-model="editUserFormData.address" prefix-icon="el-icon-location"
                          placeholder="地址长度为10-200"></el-input>
            </el-form-item>
            <el-form-item prop="remark" label="备注" label-width="60px">
                <el-input v-model="editUserFormData.remark" prefix-icon="el-icon-more"
                          placeholder="请输入备注"></el-input>
            </el-form-item>
            <el-form-item prop="deptId" label="部门" label-width="60px">
                <el-select v-model="editUserFormData.deptId" placeholder="请选择部门">
                    <el-option v-for="(item) in deptList" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="" label-width="60px">
                <el-button type="primary" icon="el-icon-check" @click="editUserOk">确定</el-button>
                <el-button type="danger" icon="el-icon-close" @click="editUserCancel">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>

<!--引入自定义js-->
<script type="text/javascript" src="/resources/js/user/getUsers.js"></script>
</body>
</html>